<template>
    <div class="container">
      <!-- 表格 -->
      <el-row class="mt15" :span="24">
        <el-card class="tab-card pdb60" shadow="never">
            <el-form ref="form"  label-width="80px" :model="addForm" :rules="addRules">
                <el-col :span="11" >
                    <el-form-item label="项目名称" prop="name">
                        <el-input v-model="addForm.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="1" prop="code">
                    <el-form-item label="项目编号">
                        <el-input v-model="addForm.code"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" >
                    <el-form-item label="ICD9版本">
                        <el-select-tree popper-class="stafftree" :popper-append-to-body="false"
                          clearable style="width:100%" :highlight-current="true" 
                          :props="defaultProps" 
                          :default-expand-all="false" placeholder="请选择版本" :data="ICD9list" :show-checkbox="true" :check-strictly="true"
                          v-model="addForm.icd9VId" 
                      ></el-select-tree>
                    </el-form-item>
                </el-col>
                
                <el-col :span="11" :offset="1">
                    <el-form-item label="ICD10版本">
                        <el-select-tree popper-class="stafftree" :popper-append-to-body="false"
                          clearable style="width:100%" :highlight-current="true" 
                          :props="defaultProps" 
                          :default-expand-all="false" placeholder="请选择版本" :data="ICD10list" :show-checkbox="true" :check-strictly="true"
                          v-model="addForm.icd10VId" 
                      ></el-select-tree>
                    </el-form-item>
                </el-col>
               
                <el-col :span="23">
                    <el-form-item label="项目描叙">
                        <el-input  type="textarea" :rows="3" v-model="addForm.remarks"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="23">
                    <el-form-item label="相关资料">
                      <el-row>
                        <el-col :span="14"><el-input v-model="fielName"></el-input></el-col>
                        <el-col :span="6" :offset="1">
                          <el-upload
                            class="upload-demo"
                            action="#"
                            :show-file-list="false"
                            :http-request="fnUploadRequest">
                            <div class="disflex flex-start align-center" style="height:40px">
                              <el-button size="small" icon="el-icon-plus" type="primary">添加文件</el-button>
                              <p class="ml20">(文件不可超过50M)</p>
                            </div>
                          </el-upload>
                        </el-col>
                        <el-col class="mt15">
                          <el-table  :data="tableData" :header-cell-style="{background:'#e4ebfd',color:'#76100db'}" >
                            <el-table-column align="center" prop="name"  label="文件名称" ></el-table-column>
                            <el-table-column align="center" prop="type" label="类型"></el-table-column>
                            <el-table-column align="center" prop="createTime" label="上传时间时间"></el-table-column>
                            <el-table-column align="center" fixed="right"  label="操作">
                              <template slot-scope="scope">
                                <el-button type="text"  class="edit" @click="handlEdit(scope.row)">编辑</el-button>
                                <el-divider direction="vertical"></el-divider>
                                <el-button type="text" @click="handleDel(scope.row)" class="del">删除</el-button>
                              </template>
                            </el-table-column>
                          </el-table>
                        </el-col>
                        
                      </el-row>
                    </el-form-item>
                </el-col>
                <el-col :span="23">
                    <el-form-item label="工期规划">
                        <el-date-picker
                          v-model="addForm.startTime"
                          type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择开始日期时间">
                        </el-date-picker>
                        <el-date-picker
                          v-model="addForm.endTime"
                          type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择结束日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="23" class="disflex spacecenter">
                  <el-button type="primary" @click="onSubmitAdd('addForm')" class="btncolor" size="small" :loading="loading" :disabled="loading">保存提交</el-button>
                  <el-button @click="isvisible = false" size="small">返回</el-button>
                </el-col>
            </el-form>
        </el-card>
    </el-row>
      
    </div>
  </template>
  
  <script>
  import { projectadd,projectdetail,projectupdate} from '@/api/manager.js'
  import {versionpage} from '@/api/icd.js'
  import Pagination from '@/components/Pagination'
  import {dicttype} from "@/api/role.js";
  import { upload} from '@/api/home.js'
  import {buildTree} from '@/utils/index'
  export default {
    name: 'manageradd',
    components: { Pagination },
    data() {
      return {
        total: 0,
        listLoading: true,
        defaultProps: {
            parent: 'pid',   // 父级唯一标识
            value: 'id',          // 唯一标识
            label: 'name',       // 标签显示
            children: 'children', // 子级
        }, // 配置
        tableData: [],
        ICD10list:[],
        ICD9list:[],
        statuslist:[],
        addForm:{
          pid:'',
          name:'',
          code:'',
          files:[]
        },
        loading:false,
        addRules: {
            name: [
              { required: true, message: '请输入名称', trigger: 'blur' },
            ],
            code: [
              { required: true, message: '请输入编码', trigger: 'blur' },
            ],
        },
        fielName:''
      }
    },
    created() {
      if(this.$route.query.id){
        this.getDetail()
      }
      this.getDIctyp()
      this.getICD10List()
      this.getICD9List()
    },
    methods: {
      //获取详情
      getDetail(){
        this.$getFlag().then(obj=>{
          projectdetail({id:this.$route.query.id},obj.data).then(res=>{
            if(res.status==200){
              this.addForm = res.data
            }
          })
        })
      },
      // 获取状态字典
      getDIctyp(){
        this.$getFlag().then(obj=>{
          dicttype({type:'icd_version_type'},obj.data).then(res=>{
            if(res.status == 200){
              this.statuslist = res.data
            }
          })
        })
      },
     // 获取表格列表信息
      getICD10List() {
        let data={
          page:1,
          num:100,
          type:'icd10'
        }
        this.$getFlag().then(obj=>{
          versionpage(data,obj.data).then(response => {
            this.ICD10list=buildTree(response.list)
          })
        })
      },
      getICD9List() {
        let data={
          page:1,
          num:100,
          type:'icd9'
        }
        this.$getFlag().then(obj=>{
          versionpage(data,obj.data).then(response => {
            this.ICD9list=buildTree(response.list)
          })
        })
      },
      onSubmitAdd(){
        if(this.$route.query.id){
          this.handleEdit()
          return false
        }
        this.$getFlag().then(obj=>{
          projectadd(this.addForm,obj.data).then(res=>{
            if(res.status == 200){
              this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
            }else{
              this.$notify({ title: "操作失败",message: res.error, type: "error", duration: 2000,});
            }
            
          })
        })
      },
      //编辑
      handleEdit(){
        this.$getFlag().then(obj=>{
          projectupdate(this.addForm,obj.data).then(res=>{
            if(res.status == 200){
              this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
            }else{
              this.$notify({ title: "操作失败",message: res.error, type: "error", duration: 2000,});
            }
          })
        })
      },
      // 上传
      fnUploadRequest(item){
        console.log(item)
        this.fielName = item.file.name
        const formData = new FormData()
        formData.append('file', item.file)
        this.$getFlag().then(obj=>{
          upload(formData,obj.data).then(res=>{
            this.addForm.files.push(res.data.filename)
            this.tableData.push({name:item.file.name,type:item.file.type,createTime:this.getNowtime(),filename:res.data.filename})
          })
        })
      },
      //获取当前时间
      getNowtime(){
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1; // 月份是从0开始的，所以需要+1
        const day = now.getDate();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  ::v-deep .stafftree .el-tree-node__content .el-checkbox .el-checkbox__input {
    display: none;
  }
  </style>
  <style>
    .el-table .warning-row {
      background: #f6f9fe;
    }
  </style>
  